<!DOCTYPE html>
<html>
{% load static %}
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>GoodApk</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="robots" content="all,follow">
    <!-- Bootstrap CSS-->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" crossorigin="anonymous">
    <!--<link rel="stylesheet" href="{% static "/vendor/bootstrap/css/bootstrap.min.css" %}">-->
    <!-- Font Awesome CSS-->
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/font-awesome/5.7.2/css/all.css" crossorigin="anonymous">
    <!--<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">-->
    <!-- Google fonts - Popppins for copy-->
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Poppins:300,400,800">
    <!-- orion icons-->
    <link rel="stylesheet" href="{% static "/css/orionicons.css" %}">
    <!-- theme stylesheet-->
    <link rel="stylesheet" href="{% static "/css/style.default.css" %}" id="theme-stylesheet">
    <!-- Custom stylesheet - for your changes-->
    <link rel="stylesheet" href="{% static "/css/custom.css" %}">
    <!-- Favicon-->
    <link rel="shortcut icon" href="{% static "/img/bg.png" %}">
    <link href="{% static "/css/fileinput.css" %}" media="all" rel="stylesheet" type="text/css"/>
    <link href="{% static "/themes/explorer-fas/theme.css" %}" media="all" rel="stylesheet" type="text/css"/>


    <!-- Tweaks for older IEs--><!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
        <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]-->
  </head>
  <body>
    <!-- navbar-->
    <header class="header">
      <nav class="navbar navbar-expand-lg px-4 py-2 bg-white shadow"><a href="#" class="sidebar-toggler text-gray-500 mr-4 mr-lg-5 lead"><i class="fas fa-align-left"></i></a><a href="/index/" class="navbar-brand font-weight-bold text-uppercase text-base">GoodApk安卓应用检测平台</a>
        <ul class="ml-auto d-flex align-items-center list-unstyled mb-0">
          <li class="nav-item">
            <form id="searchForm" class="ml-auto d-none d-lg-block">
              <div class="form-group position-relative mb-0">
                <button type="submit" style="top: -3px; left: 0;" class="position-absolute bg-white border-0 p-0"><i class="o-search-magnify-1 text-gray text-lg"></i></button>
                <input type="search" placeholder="Search ..." class="form-control form-control-sm border-0 no-shadow pl-4">
              </div>
            </form>
          </li>
          <li class="nav-item dropdown mr-3"><a id="notifications" href="http://example.com" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="nav-link dropdown-toggle text-gray-400 px-1"><i class="fa fa-bell"></i><span class="notification-icon"></span></a>
            <div aria-labelledby="notifications" class="dropdown-menu">
            	<a href="#" class="dropdown-item"> 
                	<div class="d-flex align-items-center">
                  		<div class="icon icon-sm bg-green text-white"><i class="fas fa-envelope"></i></div>
                  		<div class="text ml-2">
                    		<p class="mb-0">你有6条消息</p>
                  		</div>
           			</div>
           		</a>
           	<a href="#" class="dropdown-item">
                <div class="d-flex align-items-center">
                  <div class="icon icon-sm bg-blue text-white"><i class="fas fa-upload"></i></div>
                  <div class="text ml-2">
                    <p class="mb-0">重启服务</p>
                  </div>
                </div></a>
              <div class="dropdown-divider"></div><a href="#" class="dropdown-item text-center"><small class="font-weight-bold headings-font-family text-uppercase">查看所有公告</small></a>
            </div>
          </li>
          <li class="nav-item dropdown ml-auto">
	  	<a id="userInfo" href="http://example.com" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="nav-link dropdown-toggle">
		<img src="{% static "/img/user.jpg" %}" alt="Error" style="max-width: 2.5rem;" class="img-fluid rounded-circle shadow"></a>
            	<div aria-labelledby="userInfo" class="dropdown-menu">
			<a href="#" class="dropdown-item">
			<strong class="d-block text-uppercase headings-font-family">Chang Le</strong>
			<small>Fighting!!!</small></a>
              		<div class="dropdown-divider"></div>
			<a href="#" class="dropdown-item">设置</a>
			<a href="#" class="dropdown-item">日志</a>
              		<div class="dropdown-divider"></div>
			<a href="/login/" class="dropdown-item">退出账号</a>
            	</div>
          </li>
        </ul>
      </nav>
    </header>
    <div class="d-flex align-items-stretch">
      <div id="sidebar" class="sidebar py-3">
        <div class="text-gray-400 text-uppercase px-3 px-lg-4 py-4 font-weight-bold small headings-font-family">常用</div>
        <ul class="sidebar-menu list-unstyled">
              <li class="sidebar-list-item"><a href="/index/" class="sidebar-link text-muted"><i class="o-home-1 mr-3 text-gray"></i><span>首页介绍</span></a></li>
              <li class="sidebar-list-item"><a href="/upload/" class="sidebar-link text-muted active"><i class="o-survey-1 mr-3 text-gray"></i><span>应用检测</span></a></li>    
        </ul>
        <div class="text-gray-400 text-uppercase px-3 px-lg-4 py-4 font-weight-bold small headings-font-family">更多</div>
        <ul class="sidebiar-menu list-unstyled">
        	  <li claiss="sidebar-list-item"><a href="/login/" class="sidebar-link text-muted"><i class="o-exit-1 mr-3 text-gray"></i><span>注销</span></a></li>
        </ul>
      </div>
      <div class="page-holder w-100 d-flex flex-wrap">
        <div class="container-fluid px-xl-5">
          <section class="py-5">
            <div class="row">
              <!-- Basic Form-->
              <div class="col-lg-12 mb-5">
                <div class="card">
                  <div class="card-header">
                    <h3 class="h6 text-uppercase mb-0">应用上传区</h3>
                  </div>
                  <div class="card-body">
                    <p>提示：选择apk文件位置或直接拖拽apk文件到此处</p>
                    <p>注意：APK文件大小须小于等于100MB，仅支持apk,zip文件，ipa暂不支持</p>
                    <!--<form action="/upload/" method="post" enctype="multipart/form-data">
                        {% csrf_token %}
			<div class="form-group">
                        <label class="form-control-label text-uppercase">Apk</label>
                        <input type="file" name="picture" laceholder="apk文件" class="form-control">
                      </div>
                      <div class="form-group">       
                        <button type="submit" class="btn btn-primary">上传</button>
                      </div>
                    </form>-->
                    <div>
                    {% csrf_token %}
                      <div>
                        <label class="form-control-label text-uppercase">Apk</label>
                        <input id = "apk" name = "picture" type="file" multiple />
                        <button id="uploadBtn" class="btn btn-primary">提交</button>
                        <button id="stopBtn" class="btn btn-danger" hidden>停止检测</button>
                        <text id="message"></text>
                      </div>
                      <br>
        		<!--<button type="submit" class="btn btn-primary">提交</button>
        		<button type="reset" class="btn btn-outline-secondary">重置</button>-->
                    </div>
			              <h>{{ status }}</h>
                    <div class="progress" id="progress-area" hidden>
                        <div class="progress-bar" role="progressbar" aria-valuenow="60"
                            aria-valuemin="0" aria-valuemax="100" id="progress-bar" style="width: 0%;">
                              <span class="sr-only" id="progress-text">0%完成</span>
                        </div>
                    </div>
                        <!--<p>{{ apk_name }}</p>-->
                  </div>
                </div>
              </div>
	      <!--Table-->
              <div class="col-lg-12 mb-4">
                <div class="card">
                  <div class="card-header">
                    <h6 class="text-uppercase mb-0">检测记录</h6>
                  </div>
                  <div class="card-body">                           
                    <table class="table table-striped table-hover card-text">
                      <thead>
                        <tr>
                          <th>应用名称</th>
                          <th>检测时间</th>
                          <th>是否有违规信息</th>
                          <th>检测报告</th>
                        </tr>
                      </thead>
                      <tbody>
                        <tr>
                          <td id = "apk_name">{{ apk_name }}</td>
                          <td id = "test_time">{{ test_time }}</td>
                          <td id = "is_harmful">{{ is_harmful }}</td>
                          <td id = "result_area" hidden>
                            <div>
                            <a id = "download_link" href = "/download/{{ res_file }}" download="检测结果"><p>图片路径下载</p></a>
                            <a id = "report_link" href = "/report/1" target="_blank"><p>在线浏览报告</p></a>	
                            </div>
                          </td>
                        </tr>
                      </tbody>
                    </table>
                  </div>
                </div>
              </div>
            </div>
          </section>
        </div>
        <footer class="footer bg-white shadow align-self-end py-3 px-xl-5 w-100">
          <div class="container-fluid">
            <div class="row">
              <div class="col-md-6 text-center text-md-left text-primary">
                <p class="mb-2 mb-md-0">ChangLe &copy; 2019-2020</p>
              </div>
              <div class="col-md-6 text-center text-md-right text-gray-400">
                <p class="mb-0">Copyright &copy; 2019.ChangLe All rights reserved.More Information <a href="https://www.github.com/ITAndyoo" target="_blank" title="">Github</a> 
              </div>
            </div>
          </div>
        </footer>
      </div>
    </div>
    <!-- JavaScript files-->
    <script src="https://code.jquery.com/jquery-3.3.1.min.js" crossorigin="anonymous"></script>
    <!--<script src="{% static "/vendor/jquery/jquery.min.js" %}"></script>-->
    <script>
    $(function () {
        $("#uploadBtn").click(function () {
          upload_file = $("#apk")[0].files[0]
          if(upload_file){
            var type = (upload_file.name.substr(upload_file.name.lastIndexOf("."))).toLowerCase();
            if(type!=".apk"&&type!=".zip"){
               alert("您上传文件的类型必须为(.apk|.zip)！");
            }else{
              if(upload_file.size > 104,857,600){
                $("#message").text("上传中...")
                $("#is_harmful").text('上传中');
                $("#progress-bar").width('0%');
                $('#uploadBtn').prop("disabled", "disabled");
                var formData = new FormData();
                formData.append("csrfmiddlewaretoken",$("[name='csrfmiddlewaretoken']").val());
                formData.append("picture",upload_file);
                $.ajax({
                    type: 'post',
                    data: formData,
                    url: '',
                    contentType: false,
                    processData: false,
                    async:false,
                    success: function (data, status, resp) {
                        $("#is_harmful").text('上传成功');
                        $("#message").text("")
                        $('#uploadBtn').removeAttr("disabled");
                        task_id = data.task_id;
                        test_time = data.test_time;
                        apk_name = data.apk_name;
                        if (task_id) {
                            $("#test_time").text(test_time);
                            $("#apk_name").text(apk_name);
                            $("#is_harmful").text('任务启动中');
                            $("#progress-area").removeAttr("hidden");
                            $('#download_link').attr('href','/download/'+apk_name.split('.')[0]+'_res.txt')
                            $('#report_link').attr('href','/report/'+task_id)
                            $('#stopBtn').removeAttr('hidden');
                            $('#stopBtn').data('task_id',task_id);
                            updateProgress(task_id);
                        }
                    }
                });
              }else{
                alert('上传文件大小不能超过100MB');
              }
            }
          }else{
            alert('请选择要检测的APK文件');
          }
        });

        $('#stopBtn').click(function(){
            var task_id = $('#stopBtn').data('task_id')
            $.get("/stoptask/"+task_id,function(data){
  	        if(data['result']=='success'){
                   $('#progress-area').prop("hidden", "hidden");
                   $('#stopBtn').prop('hidden','hidden');
                   $('#is_harmful').text('已终止检测');
                   $('#is_harmful').css('color','red');
                }else{
                   $('#is_harmful').text('终止检测失败');
                   $('#is_harmful').css('color','red');
		}
            })
        })

        function updateProgress(task_id) {
           $.get("/status/"+task_id,function (data){
              percent = parseInt(data['progress']);
               if(data['state']=='success'){
                   $("#progress-text").text("已完成");
                   $("#progress-bar").width("100%");
                   $('#progress-area').prop("hidden", "hidden");
                   $('#result_area').removeAttr("hidden");
                   $('#stopBtn').prop('hidden','hidden');
                   if(data['result'][0]!=0){
                      $("#is_harmful").text('有'+data['result'][0]+'条')
                      $("#is_harmful").css('color','red')
                   }else{

                      $("#is_harmful").text('无')
                      $("#is_harmful").css('color','green')
                   }
               }else if(data['state']=='progress'){
                   $("#is_harmful").text('检测中');
                   $("#progress-text").text(percent + "%");
                   $("#progress-bar").width(percent+'%');
                   setTimeout(function (){
                       updateProgress(task_id)
                   },2000);
               }else if(data['state']=='waitting'){
                   $("#is_harmful").text('排队中');
                   $("#progress-text").text(percent + "%");
                   $("#progress-bar").width(percent+'%');
                   setTimeout(function (){
                       updateProgress(task_id)
                   },2000);
               }
           });
        }
    })
    </script>
    <script src="{% static "/vendor/popper.js/umd/popper.min.js" %}"> </script>
    <script src="{% static "/vendor/bootstrap/js/bootstrap.min.js" %}"></script>
    <script src="{% static "/vendor/jquery.cookie/jquery.cookie.js" %}"> </script>
    <script src="{% static "/vendor/chart.js/Chart.min.js" %}"></script>
    <script src="{% static "/js/js.cookie.min.js" %}"></script>
    <script src="{% static "/js/front.js" %}"></script>

    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script>
    <script src="{% static "/js/plugins/piexif.js" %}" type="text/javascript"></script>
    <script src="{% static "/js/plugins/sortable.js" %}" type="text/javascript"></script>
    <script src="{% static "/js/fileinput.js" %}" type="text/javascript"></script>
    <script src="{% static "/themes/explorer-fas/theme.js" %} type="text/javascript"></script>
    <script>
        $("#kv-explorer").fileinput({
            'theme': 'explorer-fas',
            'uploadUrl': '',
	     showPreview : false,
        });
    </script>  
</body>
</html>
